<template>
    <el-row style="width: 100%;min-width: 1024px;" :gutter="4" ref="allBox">
        <div class="searchTag">
                <span @click="clickTag(tag)" v-for="tag in tags">
                    <el-tag
                            :key="tag.name"
                            closable
                            :disable-transitions="true"
                            @close="closeSearchTag(tag)"
                            size="medium"
                            :type="tag.type"
                            class="keywordsTag"
                            style="margin-right: 15px;">
                        {{tag.name}}
                    </el-tag>
                </span>
        </div>
        <el-col :span="3"  ref="materielTypeBox" class="left-sider" style="overflow: auto;">
            <div style="margin-left: 20px;">
                <el-tree :data="typeAllDate" :props="defaultProps" node-key="id" empty-text="没有数据"
                         :expand-on-click-node="false"
                         :default-expanded-keys="defaultExpandedKeys"
                         @node-drag-start="handleTypeDragStart"
                         @node-drag-enter="handleTypeDragEnter"
                         @node-drag-leave="handleTypeDragLeave"
                         @node-drag-over="handleTypeDragOver"
                         @node-drag-end="handleTypeDragEnd"
                         @node-drop="handleTypeDrop"
                         draggable
                         :allow-drop="allowTypeDrop"
                         :allow-drag="allowTypeDrag">
                    <span class="custom-tree-node" slot-scope="{ node, data }" style="height: 100%;line-height: 100%;width: 100%;">
                        <span @click.stop="nodeClick(node.data)" style="padding: 7px 0;">{{ node.label }}</span>
                    </span>
                </el-tree>
            </div>
        </el-col>
        <el-col :span="21"  ref="materielBox" class="right-content">
            <el-col ref="splitLine" class="split-line"></el-col>
            <div class="operatBtnWrapper" style="height: 30px;padding: 10px 0 10px 8px;">
                <div style="min-width:400px;height: 30px;display: inline-block;">
                    <el-form :inline="true" :model="search" size="small" style="height: 30px;line-height: 30px;display: inline-block;">
                        <el-form-item label="关键字:">
                            <el-input v-model.trim="keywords" placeholder="编号 名称 规格 品牌 备注" style="margin-top: 1px;width: 180px;"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <e-button class="operatBtnMiddle" @click="searchMateriel">查询</e-button>
                            <e-button class="operatBtnMiddle" @click="getMateriel()">刷新</e-button>
                        </el-form-item>
                    </el-form>
                    <e-button class="operatBtnBig" @click="openCart">购物车 {{this.like.length}}</e-button>
                    <e-button class="operatBtnBig" @click="routeToMyApply">我的申请</e-button>
                    <e-button class="operatBtnBig" @click="">待我处理</e-button>
                    <e-button class="operatBtnBig" @click="">已处理申请</e-button>
                </div>
            </div>
            <div style="width: 98%;margin: 0 0 0 8px;">
                <el-table
                        :data="materielData"
                        @sort-change="handleSortChange"
                        border
                        @selection-change="selectionChange"
                        @filter-change="filterChange"
                        :height="tableHeight"
                        size="mini"
                        ref="materielTable"
                        :header-cell-style="headRowStyle"
                        :row-style="rowClass"
                        @row-click="rowClick"
                        style="width: 100%;">
                    <el-table-column
                            v-for="(item,index) in fieldList" :key="index"
                            v-if="item.field_name != 'images' && item.field_name != 'files' && item.field_name != 'materiel_state' && item.is_show == 1"
                            :prop="item.field_name"
                            :sortable="item.can_sort"
                            :label="item.show_name"
                            show-overflow-tooltip="true"
                            fit
                            align="center">
                        <template slot-scope="scope">
                            <span v-html="getRenderValue(scope.row,item.field_name)"></span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            v-else-if="item.field_name == 'materiel_state' && item.is_show == 1"
                            :prop="item.field_name"
                            :sortable="item.can_sort"
                            :label="item.show_name"
                            show-overflow-tooltip="true"
                            fit
                            :filters="stateOptions"
                            column-key="state"
                            :filter-method="filterStateHandler"
                            align="center">
                        <template slot-scope="scope">
                            <span v-html="getRenderValue(scope.row,item.field_name)"></span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            v-else-if="item.field_name == 'images' && item.is_show == 1"
                            :prop="item.field_name"
                            :sortable="item.sort_able"
                            :label="item.show_name"
                            show-overflow-tooltip="true"
                            fit
                            align="center">
                        <template slot-scope="scope" style="padding: 0;">
                            <el-popover trigger="hover" placement="top"  style="padding: 0;" v-if="scope.row.images[0]">
                                <div class="block" style="height: 330px;width: 350px;">
                                    <el-carousel style="height: 330px;width: 350px;" indicator-position="outside" autoplay="false">
                                        <el-carousel-item v-for="item in getImages(scope.row.images)" :key="item" align="center">
                                            <img :src="item" alt="" style="height: 300px;">
                                        </el-carousel-item>
                                    </el-carousel>
                                </div>
                                <div slot="reference" class="images-wrapper" style="height: 23px;">
                                    <span>
                                        <img :src="(scope.row.images)[0].image_url" alt="" style="width: 23px;height: 23px;">
                                    </span>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                            v-else-if="item.field_name == 'files' && item.is_show == 1"
                            :prop="item.field_name"
                            :sortable="item.sort_able"
                            :label="item.show_name"
                            show-overflow-tooltip="true"
                            fit
                            align="center">
                        <template slot-scope="scope" style="padding: 0;">
                            <el-popover trigger="hover" placement="top"  style="padding: 0;" v-if="scope.row.files[0]">
                                <div class="block">
                                    <p v-for="item in getFiles(scope.row.files)" :key="item" style="font-size: 12px;margin-bottom: 3px;">
                                        <a :href="item.url" style="color: black">{{item.name}}</a>
                                    </p>
                                </div>
                                <div slot="reference" class="images-wrapper">
                                    <span>
                                        <h3>资料</h3>
                                    </span>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                            width="70"
                            label="操作"
                            align="center">
                        <template slot-scope="scope">
                            <el-button v-if="like.indexOf(scope.row.id) < 0" type="text" size="small" @click.native.stop="addToCart(scope.row)" style="padding: 2px 5px;" title="加入购物车">
                                <icon name="like" class="scaleIcon1" title="加入购物车" @click.native.stop="addToCart(scope.row)"></icon>
                            </el-button>
                            <el-button v-if="like.indexOf(scope.row.id) >= 0" type="text" size="small" @click.native.stop="delFromCart(scope.row)" style="padding: 2px 5px;" title="从购物车删除">
                                <icon name="like-pick" class="scaleIcon1" title="从购物车删除" @click.native.stop="delFromCart(scope.row)"></icon>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <e-col :span="21" class="pageWrapper" ref="pageDiv">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="pageSizes"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalMateriel"
                        :current-page="currentPage"
                        style="padding-top: 6px;padding-left: 20px;height: 40px;">
                </el-pagination>
            </e-col>
        </el-col>
        <el-dialog title="购物车列表" :visible.sync="dialogCartVisible" width="80%" @close="dialogCartVisible = false" v-dialogDrag>
            <el-table
                    :data="likeMateriel"
                    border
                    @selection-change="cartSelectChange"
                    size="mini"
                    :header-cell-style="headRowStyle"
                    style="width: 100%;">
                <el-table-column
                        type="selection"
                        width="35">
                </el-table-column>
                <el-table-column
                        v-for="(item,index) in fieldList" :key="index"
                        v-if="item.field_name != 'images' && item.field_name != 'files' && item.is_show == 1"
                        :prop="item.field_name"
                        :label="item.show_name"
                        show-overflow-tooltip="true"
                        fit
                        align="center">
                    <template slot-scope="scope">
                        <span v-html="getRenderValue(scope.row,item.field_name)"></span>
                    </template>
                </el-table-column>
                <el-table-column
                        v-else-if="item.field_name == 'images' && item.is_show == 1"
                        :prop="item.field_name"
                        :label="item.show_name"
                        show-overflow-tooltip="true"
                        fit
                        align="center">
                    <template slot-scope="scope" style="padding: 0;">
                        <el-popover trigger="hover" placement="top"  style="padding: 0;" v-if="scope.row.images[0]">
                            <div class="block" style="height: 330px;width: 350px;">
                                <el-carousel style="height: 330px;width: 350px;" indicator-position="outside" autoplay="false">
                                    <el-carousel-item v-for="item in getImages(scope.row.images)" :key="item" align="center">
                                        <img :src="item" alt="" style="height: 300px;">
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                            <div slot="reference" class="images-wrapper" style="height: 23px;">
                                <span>
                                    <img :src="(scope.row.images)[0].image_url" alt="" style="width: 23px;height: 23px;">
                                </span>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        v-else-if="item.field_name == 'files' && item.is_show == 1"
                        :prop="item.field_name"
                        :label="item.show_name"
                        show-overflow-tooltip="true"
                        fit
                        align="center">
                    <template slot-scope="scope" style="padding: 0;">
                        <el-popover trigger="hover" placement="top"  style="padding: 0;" v-if="scope.row.files[0]">
                            <div class="block">
                                <p v-for="item in getFiles(scope.row.files)" :key="item" style="font-size: 12px;margin-bottom: 3px;">
                                    <a :href="item.url" style="color: black">{{item.name}}</a>
                                </p>
                            </div>
                            <div slot="reference" class="images-wrapper">
                                <span>
                                    <h3>资料</h3>
                                </span>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        label="数量"
                        show-overflow-tooltip="true"
                        fit
                        width="105"
                        align="center">
                    <template slot-scope="scope" style="padding: 0;">
                        <!--<el-input size="mini" v-model="scope.row.number" :min="1" style="width: 40px;border-radius: 0;"></el-input>-->
                        <el-input-number v-model="scope.row.number"  size="mini" @change="" :min="1" label="物料数量" style="width: 100px;"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column
                        width="70"
                        label="操作"
                        align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click.native.stop="delFromCart(scope.row,'cart')" style="padding: 2px 5px;" title="删除">
                            <icon name="del" class="scaleIcon1" title="删除" @click.native.stop="delFromCart(scope.row,'cart')"></icon>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogCartVisible = false">取 消</el-button>
                <el-button type="primary" @click="createApply">申 请</el-button>
            </span>
        </el-dialog>
    </el-row>
</template>

<script>
    import http from "@/assets/js/http"
    import _g from "@/assets/js/global"
    // import { getPageData} from "@/assets/js/common.js"
    import { mapGetters } from 'vuex'
    import { ADDRLIST } from "@/assets/js/data.js"
    import {countryList} from "../../../assets/js/data";

    export default {
        data() {
            return{
                /* --------------------------------------- 物料类别 -------------------------------------------- */
                typeData: [],           //类别数据tree
                typeAllDate: [],        //类别数据（添加全部作为最外层）
                defaultExpandedKeys: [0], //默认展开的节点
                /* --------------------------------------- 物料 -------------------------------------------- */
                materielData: [],  //物料数据
                tableHeight: window.screen.availHeight - (window.outerHeight - window.innerHeight + 220) - 77,   //根据不同电脑计算table的高度
                totalMateriel: '',              //物料总数，类别、关键字有影响
                pageSizes: [20, 50, 100],       //每页条数选择数组
                pageSize: 20,                   //每页条数
                currentPage: 1,                 //当前页码
                currentType: 0,                 //当前物料类别
                sortColumn: 'create_time',      //排序字段，默认创建时间
                sortDirection: 'descending',    //排序方式，默认降序
                keywords: '',                   //物料搜索关键字
                fieldShow: {},                  //用于物料表单字段显示名
                tags: [],
                tableHeader: ['materiel_shelves','safe_inventory','avg_price','materiel_price','materiel_inventory'],                //不显示蓝色背景的表头字段
                selection: [],   //选中的物料
                materielInfo: '',
                stateOptions: [
                    {label:'启用',value:0,text:'启用'},
                    {label:'用完即止',value:1,text:'用完即止'},
                    {label:'禁用',value:2,text:'禁用'},
                    {label:'选型',value:3,text:'选型'},
                    {label:'报废',value:4,text:'报废'},
                ],
                filterValue: [],
                selectRow: [],
                fieldList: [],
                /* --------------------------------------- 购物车 -------------------------------------------- */
                like: [],
                dialogCartVisible: false,
                likeMateriel: [],
                cartSelect: [],
            }
        },
        methods: {
            /* --------------------------------------- 物料字段 -------------------------------------------- */
            /* 获取物料字段信息 */
            getFieldList: function(){
                let data = {};
                data.url = this.$route.path;
                this.apiPost('/materiel/field/getList',data).then(res=>{
                    if (res.code == 200){
                        this.fieldList = res.field;
                        this.fieldShow = res.fieldShow;
                        this.searchField = res.searchField;
                    }else{
                        _g.toastMsg("error", res.message);
                    }
                });
            },
            /* --------------------------------------- 购物车 -------------------------------------------- */
            /* 打开购物车 */
            openCart:function(){
                if (this.like.length <= 0){
                    _g.toastMsg('error','购物车空空如也');
                    return;
                }
                this.getCartList();
                this.dialogCartVisible = true;
            },
            /* 获取购物车物料列表 */
            getCartList:function(){
                let data = {};
                data.path = this.$route.path;
                this.apiPost('admin/cart/getList',data).then(res=>{
                    if (res.code != 200){
                        _g.toastMsg('error',res.message);
                    } else{
                        this.likeMateriel = res.data;
                    }
                });
            },
            /* 物料加入购物车 */
            addToCart:function(row){
                let data = {};
                data.id = row.id;
                this.apiPost('admin/cart/add',data).then(res=>{
                    if (res.code == 200){
                        //_g.toastMsg('success',res.message);
                        this.like.push(row.id);
                    }else{
                        _g.toastMsg('error',res.message);
                    }
                });
            },
            /* 从购物车删除物料 */
            delFromCart:function(row,cart){
                let data = {};
                data.id = row.id;
                if (cart == 'cart'){
                    this.$confirm('是否确认删除?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        center: true
                    }).then(()=>{
                        this.apiPost('admin/cart/del',data).then(res=>{
                            if (res.code == 200){
                                if (this.like.length == 1){
                                    this.like = [];
                                    this.dialogCartVisible = false;
                                } else{
                                    this.like.splice(this.like.indexOf(row.id),1);
                                    if (cart == 'cart'){
                                        this.getCartList();
                                    }
                                }
                            }else{
                                _g.toastMsg('error',res.message);
                            }
                        });
                    }).catch();
                }else{
                    this.apiPost('admin/cart/del',data).then(res=>{
                        if (res.code == 200){
                            this.like.splice(this.like.indexOf(row.id),1);
                            if (cart == 'cart'){
                            }
                        }else{
                            _g.toastMsg('error',res.message);
                        }
                    });
                }
            },
            /* 获取购物车物料id列表 */
            getCart:function(){
                this.apiPost('admin/cart/get','').then(res=>{
                    if (res.code == 200){
                        this.like = res.data;
                    } else{
                        _g.toastMsg('error',res.message);
                    }
                });
            },
            cartSelectChange:function(selection){
                this.cartSelect = selection;
            },
            /* 生成物料申请单 */
            createApply:function(){
                if (this.cartSelect.length < 1){
                    _g.toastMsg('error','请勾选要申请的物料');
                    return;
                }
                this.$confirm('是否确认申请?','提示',{
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(()=>{
                    _g.showLoading('生成中');
                    let data = [];
                    for (let item of this.cartSelect){
                        data.push({id:item.id,number:item.number});
                    }
                    this.apiPost('admin/ApplyMateriel/create',data).then(res=>{
                        _g.showLoading().close();
                        if (res.code != 200){
                            _g.toastMsg('error',res.message);
                        } else{
                            _g.toastMsg('success','生成物料申请单成功');
                            this.dialogCartVisible = false;
                            this.getCartList();
                            this.getCart();
                            this.$router.push({path:'/guest/materiel/myApply/detail',query:{id:res.data}});
                        }
                    });
                }).catch();
            },
            routeToMyApply:function(){
                this.$router.push('/guest/materiel/myApply');
            },
            /* --------------------------------------- 物料 -------------------------------------------- */
            /* 表头样式 */
            headRowStyle:function({row,column,rowIndex,columnIndex}){
                return 'background:#E6EEF8;color:#222;padding:3px 0;';
            },
            /* 修改每页条数事件 */
            handleSizeChange:function(size){
                let tmpSize = this.pageSize;
                if (tmpSize > this.totalMateriel && size > this.totalMateriel){
                    this.pageSize = size;
                    return;
                }
                this.pageSize = size;
                this.getMateriel();
            },
            /* 修改当前页码事件 */
            handleCurrentChange:function(page){
                this.currentPage = page;
                this.getMateriel();
            },
            /* 修改排序事件 */
            handleSortChange:function(column){
                if (column.prop){
                    this.sortColumn = column.prop;
                    this.sortDirection = column.order;
                }else{
                    this.sortColumn = 'create_time';
                    this.sortDirection = 'descending';
                }
                this.getMateriel();
            },
            /* 物料表选中事件 */
            selectionChange:function(selection){
                this.selection = selection;
            },
            /* 筛选状态事件 */
            filterStateHandler:function(value, row){
                let state = row.materiel_state;
                return state == value;
            },
            /* 状态筛选改变的事件 */
            filterChange:function(filters){
                let state = [];
                for (let i = 0; i < filters.state.length; i++){
                    state.push(filters.state[i]);
                }
                this.filterValue = state;
                this.currentPage = 1;
                this.getMateriel();
            },
            /* 渲染表体内容 */
            getRenderValue:function(name,field){
                
                if (field == 'materiel_type_id'){
                    console.log(name.type);
                    if (name.type){
                        return name.type.fullType;
                    }
                    return '';
                }
                if (field == 'materiel_inventory' || field == 'create_time'){
                    return name[field];
                }
                if (field == 'materiel_unit' && name[field]){
                    return name['materiel_unit_read'];
                }
                if (field == 'materiel_state'  && name[field] >= 0){
                    switch (name[field]){
                        case 0: return '启用';break;
                        case 1: return '用完即止';break;
                        case 2: return '禁用';break;
                        case 3: return '选型';break;
                        case 4: return '报废';break;
                    }
                }
                if (name[field]){
                    let val = name[field];
                    if (this.searchField.indexOf(field) >= 0){
                        if (val.indexOf(this.keywords) >= 0){
                            return val.replace(this.keywords,"<font color='red'>"+this.keywords+"</font>");
                        }else {
                            return val;
                        }
                    }else{
                        return val;
                    }
                }
            },
            /* 搜索物料 */
            searchMateriel:function(){
                let data = {};
                this.currentPage = 1;
                data.keywords = this.keywords;
                if (this.keywords){
                    let tag = {};
                    tag.name = this.keywords;
                    tag.type = '';
                    if (this.tags.length > 7){
                        this.tags.shift();
                    }
                    this.tags.push(tag);
                }
                this.getMateriel();
            },
            /* 搜索标签点击事件 */
            clickTag:function(tag){
                if (!tag.tag){
                    this.keywords = tag.name;
                    this.getMateriel();
                }
            },
            /* 重组图片数组，表体中显示 */
            getImages:function (images) {
                let imageArr = [];
                for (let i in images){
                    imageArr.push(images[i].image_url);
                }
                return imageArr;
            },
            /* 重组文件数组，表体中显示 */
            getFiles:function (files) {
                let fileArr = [];
                for (let i in files){
                    fileArr.push({name:files[i].old_name,url:files[i].file_url});
                }
                return fileArr;
            },
            /* 清除搜索关键字 */
            closeSearchTag:function(tag){
                this.tags.splice(this.tags.indexOf(tag), 1);
                if (tag.tag && tag.tag == 'materielType'){
                    this.currentType = 0;
                    this.getMateriel();
                }else if(tag.name == this.keywords){
                    this.keywords = '';
                    this.getMateriel();
                }
            },
            /* --------------------------------------- 物料类别 -------------------------------------------- */
            /* 单击类别事件 */
            nodeClick: function(data) {
                let pId = [];
                if (data.path.length > 1){
                    let path = data.path.substr(1,data.path.length-2);
                    let key = 0;
                    path = path.split('-');
                    for (let value of path) {
                        pId[key] = Number(value);
                        key++;
                    }

                }
                pId.push(data.id);
                this.currentPage = 1;
                this.currentType = data.id;
                this.getMateriel();
            },
            //获取物料类别
            getTypeList: function () {
                this.apiPost('/materiel/type/all','').then(res=>{
                    let typeAllDate = {};
                    typeAllDate.name = '全部';
                    typeAllDate.label = '全部';
                    typeAllDate.id = 0;
                    typeAllDate.value = 0;
                    typeAllDate.parent_id = 0;
                    typeAllDate.path = '-';
                    typeAllDate.children = res.data;
                    this.typeAllDate = [typeAllDate];
                    this.typeData = res.data;
                    //this.typeNameList = res.list;
                });
            },
            //获取物料
            getMateriel: function () {
                let url = this.$route.path;
                let data = {'type':this.currentType,'pageSize':this.pageSize,'page':this.currentPage,'sortColumn':this.sortColumn,'sortDirection':this.sortDirection,'url':url};
                data.state = this.filterValue;
                if (this.keywords != '') {
                    data.keywords = this.keywords;
                }
                this.apiPost('/materiel/list',data).then(res=>{
                    console.log(res.data);
                    this.materielData = res.data;
                    this.totalMateriel = res.count;
                });
            },
            /* 分隔线拖动事件 */
            moveSplitLine:function(){
                var allBox = this.$refs.allBox.$el;
                var materielTypeBox = this.$refs.materielTypeBox.$el;
                var materielBox = this.$refs.materielBox.$el;
                var splitLine = this.$refs.splitLine.$el;
                var pageDiv = materielBox['children'][3];
                splitLine.onmousedown = function (e) {
                    var disX = (e || event).clientX;
                    splitLine.left = splitLine.offsetLeft;
                    document.onmousemove = function (e) {
                        var iT = splitLine.left + ((e || event).clientX - disX);

                        var e = e || window.event;
                        var maxT = allBox.clientWidth - splitLine.offsetWidth;  //clientWight
                        iT < 0 && (iT = 0);
                        iT > maxT && (iT = maxT);
                        splitLine.style.left = iT + "px";
                        if (((allBox.clientWidth >1300 && (allBox.clientWidth - iT) > 800) || allBox.clientWidth <= 1300) && iT >= 190){
                            materielTypeBox.style.width = Math.floor(iT/allBox.clientWidth*100) + "%";
                            materielBox.style.width = (100 - Math.floor(iT/allBox.clientWidth*100)) + "%";
                            pageDiv.style.width = (100 - Math.floor(iT/allBox.clientWidth*100) - 0.1) + "%";
                        }
                        return false;
                    };
                    document.onmouseup = function () {
                        document.onmousemove = null;
                        document.onmouseup = null;
                        splitLine.releaseCapture && splitLine.releaseCapture();
                    };
                    splitLine.setCapture && splitLine.setCapture();
                    return false;
                };
            },
            /* 计算分割线的高度,物料表单弹框定位 */
            splitLineHeight:function () {
                var splitLine = this.$refs.splitLine.$el;
                var materielTypeBox = this.$refs.materielTypeBox.$el;
                var heightOne = window.screen.availHeight - (window.outerHeight - window.innerHeight + 220) - 2;
                splitLine.style.height = heightOne + 'px';
                materielTypeBox.style.height = heightOne + 'px';
            },
        },
        mounted: function () {
            this.getFieldList();
            this.getCart();
            this.getTypeList();
            this.getMateriel();
            this.splitLineHeight();
            this.moveSplitLine();
        },
        mixins: [http]
    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    $color-blue: #2196F3;
    $space-width: 18px;
    .ms-tree-space {
        position: relative;
        top: 1px;
        display: inline-block;
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        width: $space-width;
        height: 14px;
        &::before {
            content: ""
        }
    }
    .processContainer{
        width: 100%;
        height: 100%;
    }
    table td {
        line-height: 26px;
    }
    .tree-ctrl{
        position: relative;
        cursor: pointer;
        color: $color-blue;
        margin-left: -$space-width;
    }
    .left-sider{
        height: 100%;
        overflow: hidden;
    }
    .right-content {
        height: 100%;
    }
    .custom-tree-node {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        padding-right: 20px;
    }
    .toggleShow{
        display: none;
        margin-left: 20px;
        padding-bottom: 7px;
    }
    .toggleShow button{
        width: 20px;
        height: 23px;
        margin-left: 0;
    }
    .toggleShow span svg{
        width: 7px;
        height: 7px;
    }
    .el-tree-node__content:hover .custom-tree-node > span.toggleShow{
        display: inline-block;
    }
    .operatBtnSmall{
        color: white;
        background-color: #f39c00;
        width: 60px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: none;
        font-size: 14px;
        cursor: pointer;
    }
    .operatBtn:hover{
        background-color: #f5b466;
    }
    .el-carousel__item img {
        opacity: 0.75;
        height: 150px;
        line-height: 150px;
        margin: 0;
    }
    .split-line{
        width: 2px;
        border-left: 1px solid #d1d1d1;
        border-right: 1px solid #d1d1d1;
        background-color: #E6EEF8;
        cursor:w-resize;
        float: left;
    }
    .pageWrapper{
        margin-left: 8px;
        width: 87.4%;
        height: 40px;
        position: fixed;
        right: 0;
        bottom: 0;
        background-color: #E6EEF8;
        border-left: 1px solid #d1d1d1;
        border-right: 1px solid #d1d1d1;
        border-bottom: 1px solid #d1d1d1;
    }
    .operation{
        border-left: 1px solid #d1d1d1;
    }
    .operatBtnBig{
        display: inline-block;
        color: white;
        background-color: #f39c00;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: none;
        font-size: 14px;
        cursor: pointer;
        margin-left: 0;
        margin-right: 5px;
        padding: 0 8px;
        border-radius: 0;
    }
    .operatBtnMiddle{
        display: inline-block;
        color: white;
        background-color: #f39c00;
        width: 44px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: none;
        font-size: 14px;
        cursor: pointer;
        margin-left: 0;
        margin-right: 5px;
        padding: 0 8px;
        border-radius: 0;
    }
    .operatBtnMiddle:hover,.operatBtnBig:hover{
        background-color: #f5b466;
    }
    .materielClass{
        position: fixed;
        width: 800px;
        max-height: 80%;
        top: 50px;
        margin:0 auto;
        overflow: auto;
        background-color: white;
        box-shadow: 1px 1px 5px rgba(0,0,0,.2);
        border-radius: 10px;
        z-index: 2000;
        padding: 10px 15px 20px 15px;
    }
    .materielTitle{
        height: 24px;
        line-height: 24px;
        padding: 20px 30px 10px 30px;
        font-size: 18px;
        color: #303133;
        cursor: move;
    }
    .materielContent{
        padding: 30px 30px;
    }
    .materielFooter{
        padding: 10px 30px 30px 30px;
        text-align: right;
    }
    .materielButton{
        display: inline-block;
        height: 18px;
        line-height: 18px;
        width: 18px;
        padding: 2px 5px;
        cursor: pointer;
    }
    .searchTag{
        position: absolute;
        top: -40px;
        left: 260px;
    }
    .keywordsTag{
        cursor: pointer;
    }
</style>